<template>
	<view>
		<view v-if="list.length == 0" style="background-color: #F2F2F2;">
			<view class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
		</view>
		<view class="bg-white h_100" v-else>
			<view class="p-2 flex flex-wrap justify-between">
				<view class="honor_item my-2" :class="{ honor_item_my: ismy }" v-for="(item, index) of list" :key="item.id" @click="previewImge(item, index)">
					<!-- 遮罩层 -->
					<view class="overlay" v-if="item.check"></view>
					<view :class="{ 'cont ': ismy }">
						<view class="top_cont flex justify-between" @tap.stop v-if="ismy">
							<view><view class="l_text font_24_2 text-white m-1" v-if="item.status == 1">上架中</view></view>
							<checkbox-group @change="checkChange(item, index)">
								<view class="check_box"><checkbox class="check p-1" :value="item.id" :checked="item.check" color="#CF1526" /></view>
							</checkbox-group>
						</view>
						<image class="img" :src="item.img_path" mode="aspectFill"></image>
						<view class="h6 lh_42 my-1 text-center text_hidden1">{{ item.title || '' }}</view>
					</view>
					<view class="product_btn" v-if="ismy">
						<text class="text_btn" @click="previewImge(item, index)">查看</text>
						<text class="text_btn" @click.stop="goPages('./publish/honor_put?id=' + item.id)">编辑</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
		</view>
	</view>
</template>

<script>
import { getHonoList } from '@/api/home/company.js';
import { honorDel } from '@/api/my/publish.js';

export default {
	props: {
		ismy: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			list: [],
			page: 1, //页数
			suo: true,
			status: 'loadmore',
			checkList: [],
			companyId: ''
		};
	},
	onReachBottom() {
		console.log('加载更多');
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getList(this.companyId);
			}, 1000);
		}
	},
	onLoad(option) {
		this.companyId = option.companyId;
		this.getList(option.companyId);
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	created() {
		if (this.ismy) {
			this.getList();
		}
	},
	methods: {
		getList(val) {
			let msg = {
				page: this.page,
				// 从个人中心企业主页查看使用用户id,展商企业进入查看传入企业id
				uid: this.ismy ? uni.getStorageSync('userInfo').userId : val,
				token: uni.getStorageSync('userInfo').token || ''
			};
			getHonoList(msg).then(res => {
				if (res.code == 0) {
					this.list.push(...res.data);
					if (res.data.length == 0) {
						this.status = 'nomore';
						this.suo = false;
					} else if (res.data.length < 10) {
						this.status = 'nomore';
						this.suo = false;
					} else {
						this.status = 'loadmore';
						this.suo = true;
					}
				} else {
					uni.$u.toast('获取荣誉资质失败');
				}
			});
		},
		// 荣誉资质图片预览
		previewImge(val, idx) {
			uni.previewImage({
				current: idx, //预览图片的下标
				urls: [val.img_path]
			});
		},
		// 选择
		checkChange(val, idx) {
			this.$set(this.list[idx], 'check', !val.check);
			if (val.check) {
				this.checkList.push(val.id);
			} else {
				let index = this.checkList.map(item => item).indexOf(val.id);
				this.checkList.splice(index, 1);
			}
			// console.log(this.checkList);
			this.$emit('delChange', [...new Set(this.checkList)].length);
		},
		// 删除
		checkDel() {
			this.checkList = [...new Set(this.checkList)];
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				ids: this.checkList
			};
			honorDel(msg)
				.then(res => {
					// console.log(res);
					uni.$u.toast(res.msg);
					if (res.code == 0) {
						this.$emit('delAfter');
						this.list = [];
						this.page = 1;
						this.getList(this.companyId);
					}
				})
				.catch(err => {
					console.log('删除失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.honor_item {
	width: calc((100% / 2) - 10rpx);
	height: 100%;
	position: relative;

	.img {
		width: 100%;
		height: 220rpx;
	}
}
.honor_item_my {
	background-color: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(210, 210, 210, 0.53);
	border-radius: 14rpx;
}
.overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 15rpx;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}
.cont {
	padding-bottom: 50rpx !important;
	padding: 20rpx;
	position: relative;
}
.top_cont {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60rpx;
	z-index: 15;
	padding: 15rpx;
	.l_text {
		width: 120rpx;
		height: 42rpx;
		background: #ff8b19;
		border-radius: 15rpx 0px 15rpx 0px;
	}
	.check_box {
		z-index: 15;
		.check {
			transform: scale(0.7);
		}
	}
}
.product_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	maargin-top: 30rpx;

	text {
		width: 50%;
		background-color: $color14;
		color: $color2;
		text-align: center;
		padding: 10rpx 0;
		font-size: 28rpx;
		font-weight: bold;
	}

	text:first-child {
		border-right: 1px solid $color5;
		box-sizing: border-box;
		border-bottom-left-radius: 15rpx;
	}

	text:last-child {
		border-bottom-right-radius: 15rpx;
	}
	.text_btn {
		background-color: $color14;
		color: $color2;
	}
}
</style>
